<template>
  <el-row>
    <el-col :span="12">
      <div class="conversion-pie">
        <ve-pie
          v-if="!loading"
          :graphic="getGraphic"
          :legend-visible="false"
          :loading="loading"
          :data="chartData"
          :settings="chartSettings"
          :colors="colors"
          :extend="extendsConfig"
        />
      </div>
    </el-col>
    <el-col :span="12">
      <div class="conversion-content">
        <div class="title">独立访客数(UV)</div>
        <div class="num"><count-roll :number="response.uv" /></div>
      </div>
      <div class="conversion-content">
        <div class="title">下单用户数</div>
        <div class="num"><count-roll :number="response.place_count" /></div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import VePie from 'v-charts/lib/pie.common';
import 'v-charts/lib/style.css';
import CountRoll from '@/pages/data/components/count_roll';
import { floatSymbol, preSymbol } from '@/common/js/filters.js';

export default {
  components: {
    VePie,
    CountRoll
  },
  data() {
    return {
      response: {},
      loading: true,
      chartSettings: {
        // labelMap: {
        //   order_user_count: '下单量',
        //   uv: '独立访客数(UV)'
        // }
      },
      chartData: {
        columns: ['title', 'value'],
        rows: []
      },
      colors: ['#7BB4FF', '#ECECEC'],
      graphic: [
        {
          // 环形图中间添加文字
          type: 'text', // 通过不同top值可以设置上下显示
          left: 'center',
          top: '28%',
          style: {
            text: '0%',
            textAlign: 'center',
            fill: '#7BB4FF', // 文字的颜色
            fontSize: 26,
            fontWeight: 600
          }
        },
        {
          type: 'text',
          left: 'center',
          top: '40%',
          style: {
            text: '下单转化率',
            textAlign: 'center',
            fill: '#303133',
            fontSize: 16,
            fontWeight: 500
          }
        },
        {
          type: 'group',
          left: '38%',
          top: '50%',
          children: [
            {
              type: 'text',
              textAlign: 'left',
              left: 0,
              style: {
                text: '日环比：  ',
                fill: '#303133',
                fontSize: 12,
                fontWeight: 400,
                lineHeight: 18
              }
            },
            {
              type: 'text',
              left: 40,
              textAlign: 'left',
              style: {
                text: '0%',
                fill: '#67C23A',
                fontSize: 12,
                fontWeight: 400,
                lineHeight: 18
              }
            }
          ]
        },
        {
          type: 'group',
          left: '38%',
          top: '56%',
          children: [
            {
              type: 'text',
              left: 0,
              textAlign: 'left',
              style: {
                text: '周同比：  ',
                fill: '#303133',
                fontSize: 12,
                fontWeight: 400,
                lineHeight: 18
              }
            },
            {
              type: 'text',
              left: 40,
              textAlign: 'left',
              style: {
                text: '0%',
                fill: '#67C23A',
                fontSize: 12,
                fontWeight: 400,
                lineHeight: 18
              }
            }
          ]
        }
      ],
      extendsConfig: {
        series: {
          radius: ['60%', '70%'], // 设置内半径和外半径，形成环状
          avoidLabelOverlap: false, // 避免标注重叠
          hoverAnimation: false, // 移入放大
          silent: true,
          center: ['50%', '40%'],
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: false,
              textStyle: {
                fontSize: '30',
                fontWeight: 'bold'
              }
            }
          }
        }
      }
    };
  },
  computed: {
    getGraphic() {
      const graphic = this.graphic;
      // 转化率百分比
      graphic[0].style.text = preSymbol(this.response.user_conversion);
      // 日环比
      graphic[2].children[1].style.text = preSymbol(floatSymbol(this.response.user_conversion_ratio));
      // 周同比
      graphic[3].children[1].style.text = preSymbol(floatSymbol(this.response.user_conversion_week_ratio));

      return graphic;
    }
  },
  created() {
    this.$http.get(
      '/admin/data/survey/today/place/order',
      {},
      response => {
        this.response = response.data;
        this.loading = false;
        this.chartData.rows = [{ title: '下单用户占比', value: this.response.user_conversion }, { title: '未下单人数', value: 100 - this.response.user_conversion }];
      },
      errror => {},
      false
    );
  }
};
</script>

<style scoped lang="scss">
.conversion-pie {
  height: 290px;
  position: relative;
  overflow: hidden;
  .ve-pie {
    position: absolute;
    top: -15px;
  }
}
.conversion-content {
  margin-left: 50px;
  &:nth-child(1) {
    margin-top: 78px;
  }
  &:nth-child(2) {
    margin-top: 40px;
  }
  .title {
    color: #606266;
    font-size: 15px;
    margin-bottom: 10px;
  }
  .num {
    color: #303133;
    font-size: 22px;
    font-weight: bold;
  }
}
</style>
